<template>
	<view class="">
		<scroll-view scroll-y="true" :style="{height: scrollHeight}">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view v-else>
				<view class="m-2 pl-3 bg-white rounded-20" v-for="(item,index) in products" :key='index'>
					<view class="d-flex border-bottom py-3 pr-3">
						<view class="white-space">规格信息</view>
						<view class="ml-6 text-000 ellipsis-1 white-space">{{item.label_product_attr}}</view>
					</view>
					<view class="d-flex border-bottom py-3">
						<view class="">规格货号</view>
						<view class="ml-6">
							<input type="text" value="" class="text-999" v-model="products[index].product_sn" :placeholder="item.product_sn?item.product_sn:'请输入规格货号 (选填)'"  />
						</view>
					</view>
					<view class="d-flex border-bottom py-3">
						<view class="">本店售价</view>
						<view class="ml-6">
							<input type="digit" value="" class="text-999" v-model="products[index].product_shop_price" :placeholder="item.product_shop_price==0?item.product_shop_price:'请输入本店价格'" />
						</view>
					</view>
					<view class="d-flex border-bottom py-3">
						<view class="mr-3">成本价</view>
						<view class="ml-6">
							<input type="digit" value="" class="text-999" v-model="products[index].cost_price" :placeholder="item.cost_price==0?item.cost_price:'请输入成本价'" />
						</view>
					</view>
					<view class="d-flex py-3">
						<view class="">初始库存</view>
						<view class="ml-6">
							<input type="digit" value="" class="text-999" v-model="products[index].product_number" :placeholder="item.product_number==0?item.product_number:'请输入库存'" />
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer"></view>
		<view class="position-fixed bottom-0 w-100 bg-white">
			<view class="d-flex sub j-sb p-2">
				<button type="warn" hover-class="button-hover" class="dele" @click="batch_spec">批量操作</button>
				<button type="warn" class="rele" @click="sub_next">保存</button>
			</view>	
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				scrollHeight:0, // 屏幕高度,
				goods_id:0, // 商品ID
				u_loadmore:true, // 加载中
				products:"", // 货品列表
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.footer').boundingClientRect()
					console.log(resu)
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		methods:{
			// 批量操作
			batch_spec(){
				uni.navigateTo({
					url:'/pagesA/goods/spec-batch?goods_id='+this.goods_id
				})
				console.log(11)
			},
			// 保存
			sub_next(){
				let goods_products=this.products.reduce((acc,item)=>{
					acc.push({
						product_id:item.product_id,
						product_sn:item.product_sn,
						product_price:item.product_shop_price,
						product_cost_price:item.cost_price,
						product_number:item.product_number,
						product_bar_code:item.product_bar_code
					})
					return acc
				},[])
				
				this.$H.post("v2/store/goods/product/batch/update",{
					goods_id:this.goods_id,
					goods_products:JSON.stringify(goods_products)
				}).then(res=>{
					if(res.data){
						this.$u.toast('修改成功');
						uni.navigateBack({
							delta:1
						})
						console.log(res)
					}else{
						this.$u.toast(res.status.error_desc);
					}
				})
			}
		},
		onShow() {
			this.$H.post("v2/store/goods/products",{
				goods_id:this.goods_id
			}).then(res=>{
				console.log(res)
				this.products=res.data
			})
		},
		onLoad(e) {
			this.goods_id=e.goods_id
			this.$H.post("v2/store/goods/products",{
				goods_id:this.goods_id
			}).then(res=>{
				console.log(res)
				this.u_loadmore=false
			})
		}
	}
</script>

<style>
	.sub /deep/ .dele{
		background: #ff9900;
		border-radius: 50upx;
		width: 45%;
		color: #FFFFFF;
	}
	.sub /deep/ .dele::after{
		border: none;
		color: #000000;
	}
	.sub /deep/ .rele{
		width: 45%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.sub /deep/ .button-hover {
	  background-color: #EEEEEE;
	}
</style>
